<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章管理</title>
    <link href="./2.12.1/css/layui.css" rel="stylesheet">
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">文章管理</div>
        <div class="layui-card-body">
            <!-- 搜索表单 -->
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">关键字</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" placeholder="请输入标题关键字" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" name="startTime" placeholder="开始时间" autocomplete="off" class="layui-input" id="startTime">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="endTime" placeholder="结束时间" autocomplete="off" class="layui-input" id="endTime">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="search-btn">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="button" class="layui-btn layui-btn-normal" id="add-btn">添加文章</button>
                    </div>
                </div>
            </form>
            
            <!-- 文章列表 -->
            <table class="layui-table" id="article-table" lay-filter="article-table"></table>
        </div>
    </div>

    <script src="./2.12.1/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'laydate'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            
            // 初始化日期选择器
            laydate.render({
                elem: '#startTime',
                type: 'datetime'
            });
            laydate.render({
                elem: '#endTime',
                type: 'datetime'
            });
            
            // 初始化表格
            table.render({
                elem: '#article-table',
                url: 'javascript:void(0)', // 实际项目中应为后端API
                page: true,
                cols: [[
                    {field: 'id', title: 'ID', width: 80},
                    {field: 'title', title: '标题', width: 200},
                    {field: 'tags', title: '标签', templet: function(d){
                        var tags = JSON.parse(localStorage.getItem('tags') || '[]');
                        var tagNames = [];
                        d.tags.forEach(function(tagId) {
                            var tag = tags.find(function(t) { return t.id == tagId; });
                            if (tag) tagNames.push(tag.name);
                        });
                        return tagNames.join(', ');
                    }},
                    {field: 'createTime', title: '创建时间', width: 180},
                    {title: '操作', toolbar: '#article-toolbar', width: 150}
                ]],
                parseData: function(res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.length,
                        "data": res
                    };
                },
                data: JSON.parse(localStorage.getItem('articles') || '[]')
            });
            
            // 搜索按钮点击事件
            document.getElementById('search-btn').addEventListener('click', function(){
                var keyword = document.querySelector('input[name="keyword"]').value;
                var startTime = document.querySelector('input[name="startTime"]').value;
                var endTime = document.querySelector('input[name="endTime"]').value;
                
                var articles = JSON.parse(localStorage.getItem('articles') || '[]');
                var filteredArticles = articles.filter(function(article) {
                    var matchKeyword = !keyword || article.title.indexOf(keyword) !== -1;
                    var matchTime = true;
                    
                    if (startTime) {
                        matchTime = article.createTime >= startTime;
                    }
                    
                    if (endTime) {
                        matchTime = matchTime && article.createTime <= endTime;
                    }
                    
                    return matchKeyword && matchTime;
                });
                
                table.reload('article-table', {
                    data: filteredArticles
                });
            });
            
            // 添加文章按钮点击事件
            document.getElementById('add-btn').addEventListener('click', function(){
                window.open('article-edit.html', '_blank');
            });
            
            // 表格工具栏事件
            table.on('tool(article-table)', function(obj){
                var data = obj.data;
                
                if (obj.event === 'edit') {
                    // 打开文章编辑页面，传递文章ID
                    window.open('article-edit.html?id=' + data.id, '_blank');
                } else if (obj.event === 'delete') {
                    layer.confirm('确定删除这篇文章吗？', function(index){
                        var articles = JSON.parse(localStorage.getItem('articles') || '[]');
                        var filteredArticles = articles.filter(function(article) {
                            return article.id !== data.id;
                        });
                        localStorage.setItem('articles', JSON.stringify(filteredArticles));
                        table.reload('article-table', {
                            data: filteredArticles
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
    
    <!-- 表格工具栏模板 -->
    <script type="text/html" id="article-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
</body>
</html>